﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Menu - Vertical Orientation</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.menu.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.menu.min.js"></script>
    <script type="text/javascript">
        angular
            .module("appModule", ["integralui"])
            .controller("appCtrl", function($scope){
                $scope.menuName = "menuSample";
                $scope.defaultIcon = 'icons-medium empty';

                $scope.data = [
                    { 
                        id: 1,
                        text: "Books",
                        icon: "icons-medium library",
                        items: [
                            { id: 11, pid: 1, text: "Art" },
                            { 
                                id: 12,
                                pid: 1,
                                text: "Business",
                                icon: "icons-medium people",
                                items: [
                                    { id: 121, pid: 12, text: "Economics" },
                                    { 
                                        id: 122,
                                        pid: 12,
                                        text: "Investing", 
                                        icon: "icons-medium economics",
                                        items: [
                                            { id: 1221, pid: 122, text: "Bonds" },
                                            { id: 1222, pid: 122, text: "Options" },
                                            { id: 1223, pid: 122, text: "Stocks" }
                                        ]
                                    },
                                    { id: 123, pid: 12, text: "Management" },
                                    { id: 124, pid: 12, text: "Small Business" }
                                ]
                            },
                            { id: 13, pid: 1, text: "Health", icon: "icons-medium heart" },
                            { id: 14, pid: 1, text: "Literature" },
                            { 
                                id: 15,
                                pid: 1,
                                text: "Science",
                                items: [
                                    { id: 151, pid: 15, text: "Astronomy" },
                                    { id: 152, pid: 15, text: "Mathematics" },
                                    { id: 153, pid: 15, text: "Evolution" },
                                    { id: 154, pid: 15, text: "Nature" }
                                ]
                            }
                        ]
                    },
                    { id: 2, text: "Computers" },
                    {
                        id: 3,
                        text: "Electronics",
                        items: [
                            { id: 31, pid: 3, text: "Camera", icon: "icons-medium camera" },
                            { id: 32, pid: 3, text: "Cell Phones" },
                            { id: 33, pid: 3, text: "Video Game Consoles" }
                        ]
                    },
                    { 
                        id: 4,
                        text: "Music", 
                        icon: "icons-medium album",
                        items: [
                            { id: 41, pid: 4, text: "Blues" },
                            { id: 42, pid: 4, text: "Classic Rock" },
                            { id: 43, pid: 4, text: "Pop" },
                            { id: 44, pid: 4, text: "Jazz" }
                        ]
                    },
                    { 
                        id: 5,
                        text: "Software",
                        icon: "icons-medium software",
                        items: [
                            { id: 51, pid: 5, text: "Games" },
                            { id: 52, pid: 5, text: "Operating Systems" },
                            { id: 53, pid: 5, text: "Network & Servers" },
                            { id: 54, pid: 5, text: "Security" }
                        ]
                    },
                    { 
                        id: 6,
                        text: "Sports",
                        icon: "icons-medium sports",
                        items: [
                            { id: 61, pid: 6, text: "Baseball" },
                            { id: 62, pid: 6, text: "Martial Arts" },
                            { id: 63, pid: 6, text: "Running" },
                            { 
                                id: 64,
                                pid: 6,
                                text: "Tennis",
                                items: [
                                    { id: 641, pid: 64, text: "Accessories" },
                                    { id: 642, pid: 64, text: "Balls" },
                                    { id: 643, pid: 64, text: "Racquets" }
                                ]
                            }
                        ]
                    },
                    { id: 7, text: "Video Games" },
                    { id: 8, text: "Watches", icon: "icons-medium clock-full" }
                ];
            });
    </script>
    <style type="text/css">
        .iui-menu
        {
            width: 200px;
        }
        .icons-medium
        {
            margin: 0;
        }
        .iui-menu-block
        {
            padding: 5px;
            cursor: pointer;
        }
        .iui-menu-item-root-vertical
        {
            border-bottom: thin solid #6080aa;
            margin: 0;
            padding: 6px 3px;
        }
        .iui-menu-item-root-vertical:last-child
        {
            border-bottom: thin solid transparent;
        }
        .iui-menu-item-root-hovered
        {
            border: thin solid transparent;
            border-bottom: thin solid #6080aa;
            border-radius: 0;
        }
        .iui-menu-item-root-content, .iui-menu-item-content
        {
            margin: 0 7px;
        }
        .iui-menu-item
        {
            width: 200px;
        }
        .clock-full
        {
            background-position: -192px -96px;
        }
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">Menu / Vertical Orientation</h2>
	        <div class="feature-content">
                <iui-menu name="{{menuName}}" items="data" item-icon="defaultIcon" display-mode="vertical" open-on-hover="true" show-dropdown-icon="true"></iui-menu>
                <div style="clear: both;height:350px;"></div>
	            <div class="feature-help">
	                <p><span class="initial-space"></span>This sample shows how to create vertical or side menu. By default Menu is arranged in horizontal layout, where root items appear in one line. By setting the <span style="color:#c60d0d">displayMode</span> property to <span style="color:#c60d0d">'vertical'</span>, the layout of the menu will change and will appear as vertical menu.</p>
                    <p>In this sample, the following property is used:</p>
	                    <ul class="feature-points">
	                        <li><span style="color:#c60d0d">displayMode</span> - specifies how menu items are displayed</li>
	                    </ul>
	                </p>
	            </div>
            </div>
        </div>
    </div>
</body>
</html>
